<template>
  <el-dialog v-model="dialogShow" :title="dialogTitle" width="800px" :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules" label-width="120px" style="width: 560px">
      <el-form-item label="登录账号">
        <span>{{dialogParams.row.userName}}</span>
      </el-form-item>
      <el-form-item label="用户名">
        <span>{{dialogParams.row.nickName}}</span>
      </el-form-item>
      <el-form-item label="积分">
        <span v-if="dialogParams.row.balance">{{dialogParams.row.balance.points}}</span>
      </el-form-item>
      <el-form-item label="变动类型" prop="type">
        <el-radio-group v-model="dialogForm.type">
          <el-radio :value="0">增加</el-radio>
          <el-radio :value="1">减少</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="变动积分" prop="total">
        <el-input v-model.number="dialogForm.total" clearable placeholder="请输入数字" oninput="value=value.replace(/[^\d]/g,'')" style="width: 50%"/>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model.trim="dialogForm.note" clearable placeholder="请输入备注"/>
      </el-form-item>
      <el-form-item>
        <div class="flexs">
          <el-button type="primary" :loading="dialogParams.loading" @click="submitDialogForm()">
            确认
          </el-button>
          <el-button @click="resetDialogForm(dialogFormRef)">重置</el-button>
        </div>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch, computed
} from "vue"

const {
  proxy
} = getCurrentInstance()
const emits = defineEmits(["close"])


const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data:{
    type: Object,
    default: {},
  },
});
const dialogForm = reactive({
  total: '',
  type:0,
  note:''
})

const dialogTitle = computed(()=>{
  return '变更积分'
})


const dialogFormRef = ref(null)
const dialogParams = reactive({
  loading: false,
  row: {}
})
const dialogFormRules = reactive({
  total: [{
    required: true,
    message: "请输入变动积分",
    trigger: "blur"
  }],
  note: [{
    required: true,
    message: "请输入备注",
    trigger: "blur"
  }]
})
const dialogShow = ref(false);
watch(()=>props.show,(nVal)=>{
  dialogShow.value = nVal
  if(nVal){
    dialogParams.row = props.data.row
  }
})
const closeDialog = () =>{
  resetDialogForm(dialogFormRef.value)
  emits("close")
}
const submitDialog = () =>{
  resetDialogForm(dialogFormRef.value)
  emits("close",true)
}
const resetDialogForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
const submitDialogForm = () => {
  dialogFormRef.value.validate((valid, fields) => {
    if (valid) {
      dialogParams.loading = true;
      let data = JSON.parse(JSON.stringify(dialogForm));
      data.userSid = dialogParams.row.sid;
      data.pointsStatus = 0;
      proxy.$axios.post(`/points`, data)
          .then((res) => {
            dialogParams.loading = false
            if (res.data.code == 200) {
              proxy.$message({
                message: `修改成功`,
                type: "success"
              })
              submitDialog();
            } else {
              proxy.$message({
                message: res.data.msg,
                type: "error"
              })
            }
          })
          .catch((err) => {
            dialogParams.loading = false
          })
    }
  })
}

onMounted(() => {

})

</script>

<style lang="less">



</style>